<template>
  <div class="ww-audio-player" :class="status">
    <ww-ap-progress
      v-show="status==='collapse'"
      :value="played"
      :max="seekable"
      :color="WwApProgressColor"
      :background-color="WwApProgressBackgroundColor"
      :loading="loading&&isPlaying"
    ></ww-ap-progress>
    <div
      class="ww-ap-wraper"
      @click="status='collapse'"
      v-show="status!='collapse'&&status!='pinned'"
    ></div>
    <div class="ww-ap-container" :style="wwApContainerStyle" :class="status">
      <img :src="src[idx].cover" alt class="cover hide-1000" />
      <div class="meta hide-1200">
        <ww-text-displayer class="title" :text="src[idx].title"></ww-text-displayer>
        <div class="artist">{{src[idx].artist}}</div>
      </div>
      <div class="main">
        <ww-ap-progress
          :value="played"
          :max="seekable"
          :color="WwApProgressColor"
          :background-color="WwApProgressBackgroundColor"
          :loading="loading&&isPlaying"
          css-position="relative"
        ></ww-ap-progress>
        <div class="info">
          <div class="meta show-1200 hide-768">
            <ww-text-displayer class="title" :text="src[idx].title"></ww-text-displayer>
            <div class="artist">{{src[idx].artist}}</div>
          </div>
          <div class="control">
            <mu-button flat class="hide-1000">
              <mu-icon value="keyboard_arrow_left"></mu-icon>
            </mu-button>
            <mu-button fab @click="onPlayPauseClick">
              <mu-icon :value="isPlaying?'pause':'play_arrow'"></mu-icon>
            </mu-button>
            <mu-button flat class="hide-1000" @click="onNext">
              <mu-icon value="keyboard_arrow_right"></mu-icon>
            </mu-button>
          </div>
          <div class="time hide-1200">
            <span>{{seconds2String(played)}}</span> /
            <span>{{seconds2String(seekable)}}</span>
          </div>
          <div class="lyric">
            <ww-ap-lyric-player :lyrictxt="src[idx].lyric" :time="played"></ww-ap-lyric-player>
          </div>
          <mu-button icon>
            <mu-icon value="crop_free"></mu-icon>
          </mu-button>
          <mu-button @click="swichPinned" :fab="status==='pinned'" :icon="status!=='pinned'">
            <mu-icon :value="status==='pinned'?'layers_clear':'layers'"></mu-icon>
          </mu-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Style from '@/utils/styleBuilder'
import WwApProgress from './WwApProgress'
import WwApLyricPlayer from './WwApLyricPlayer'
import WwTextDisplayer from '../WwTextDisplayer'

export default {
  name: 'ww-audio-player',
  components: {
    WwApProgress,
    WwTextDisplayer,
    WwApLyricPlayer,
  },
  props: {
    value: {
      type: String,
      default: 'normal',
      validator: data => {
        return ['max', 'normal', 'collapse', 'pinned'].indexOf(data) >= 0
      },
    },
    src: {
      type: Array,
      required: true,
    },
  },
  data: function () {
    return {
      idx: 0,
      status: this.value,
      processNow: 0,
      audio: document.createElement('AUDIO'),
      isPlaying: false,
      played: 0,
      seekable: null,
      loading: true,
    }
  },
  computed: {
    wwApContainerStyle () {
      var style = new Style()
      style.add('')
      return style.result()
    },
    WwApProgressColor () {
      var map = {
        max: '#1a8bed',
        normal: '#1a8bed',
        collapse: '#fff',
        pinned: '#1a8bed',
      }
      return map[this.status]
    },
    WwApProgressBackgroundColor () {
      var map = {
        max: '#1a8bed',
        normal: '#1a8bed',
        collapse: 'tranparent',
        pinned: '#1a8bed',
      }
      return map[this.status]
    },
  },
  watch: {
    value (newV) {
      this.status = newV
    },
    status (newV) {
      this.$emit('input', newV)
    },
  },
  methods: {
    seconds2String (seconds) {
      if (!seconds) return '00:00'
      var min = Math.floor(seconds / 60)
      min = min < 10 ? '0' + min : min
      var sec = Math.floor(seconds - min * 60)
      sec = sec < 10 ? '0' + sec : sec
      return min + ':' + sec
    },
    swichPinned () {
      if (this.status === 'normal') this.status = 'pinned'
      else if (this.status === 'pinned') this.status = 'normal'
    },
    timeUpdate () {
      this.$log.debug('wwap', 'paused', this.audio.paused)
      if (!this.audio.played.length) {
        this.played = 0
        this.$log.debug('wwap', 'audio played unavailable')
      } else {
        this.played = this.audio.played.end(0)
      }
      if (!this.audio.seekable.length) {
        this.seekable = 0
        this.$log.debug('wwap', 'audio seekable unavailable')
      } else {
        this.seekable = this.audio.seekable.end(0)
      }
      this.isPlaying = !this.audio.paused
    },
    onPlayPauseClick () {
      this.$log.debug('wwap', 'playing:', this.isPlaying)
      if (!this.isPlaying) this.play()
      else this.pause()
    },
    onNext () {
      this.$log.debug('wwap')
      this.reset()
      this.play()
    },
    play () {
      this.audio.play()
      this.$log.debug('wwap', 'audio play requested')
    },
    pause () {
      this.audio.pause()
      this.$log.debug('wwap', 'audio pause requested')
    },
    reset () {
      this.$log.debug('wwap')
      this.loadSrc()
    },
    loadSrc () {
      this.loading = true
      this.$log.debug('wwap', 'audio index:', this.idx)
      this.idx = Math.floor(Math.random() * this.src.length)
      this.audio.src = this.src[this.idx].src
      this.audio.load()
    },
    addEventListener () {
      this.$log.debug('wwap')
      this.audio.addEventListener('timeupdate', this.timeUpdate)
      this.audio.addEventListener('ended', this.reset)
      this.audio.addEventListener('stalled', () => {
        this.$log.error('stalled')
      })
      this.audio.addEventListener('canplay', () => {
        this.loading = false
        this.$log.warn('canplay')
      })
      this.audio.addEventListener('progress', () => {
        this.$log.warn('progress')
      })
    },
    removeEventListener () {
      this.$log.debug('wwap')
      this.audio.removeEventListener('timeupdate', this.timeupdate)
      this.audio.removeEventListener('ended', this.reset)
    },
  },
  mounted () {
    // vue component and it's children components has been initialized with default vaule
    // since we didn't set beforeCreate and created hook functions
    // we use mounted hook function because we need to interact with audio, which is dom,
    // inside this.logSrc(), otherwise we can use created
    this.loadSrc()
    this.addEventListener()
    this.$log.debug(
      'wwap',
      'audio index:',
      this.idx,
      'music src:',
      this.src[this.idx],
    )
  },
  beforeDestroy () {
    this.removeEventListener()
    this.$log.debug('wwap')
  },
}
</script>
<style lang="scss">
.ww-audio-player {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #222;
  user-select: none;
  overflow: hidden;
  &.pinned {
    position: relative;
  }
  .ww-ap-wraper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: transparent;
  }
  .ww-ap-container {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    position: relative;
    bottom: 0;
    width: 100%;
    box-shadow: 0 0 50px rgba(black, 0.1);
    transition: 0.4s;
    height: 100px;
    &.collapse {
      opacity: 0;
      height: 5px;
    }
    .cover {
      height: 75px;
      width: 75px;
      margin-left: 12.5px;
      display: block;
      box-shadow: 0 0 10px rgba(black, 0.2);
      background: rgba(#1a8bed, 0.5);
      position: relative;
      &::before {
        content: "";
        width: 70%;
        height: 70%;
        border-radius: 50%;
        position: absolute;
        background: rgba(#1a8bed, 0.5);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      &::after {
        content: "";
        width: 80%;
        height: 80%;
        border-radius: 50%;
        position: absolute;
        border: 10px solid rgba(#fff, 0.5);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .meta {
      padding: 0 15px;
    }
    .title {
      font-size: medium;
    }
    .artist {
      color: #1a8bed;
      margin-top: 3px;
      padding-left: 5px;
    }
    .main {
      flex: 1;
      position: relative;
      padding: 0 20px;
      height: 100px;
      padding-top: 10px;
    }
    .info {
      display: flex;
      align-items: center;
      height: 100%;
      & > * {
        margin-right: 10px;
      }
    }
    .control > * {
      @media screen and (min-width: 1366px) {
        margin: 0 20px;
      }
      margin: 0 10px;
    }
    .time {
      @media screen and (min-width: 1366px) {
        width: 200px;
      }
      width: 150px;
      text-align: center;
      span {
        font-weight: 500;
        padding: 0 5px;
        &:first-child {
          color: #1a8bed;
        }
      }
    }
    .lyric {
      padding: 0 10px;
      flex: 1;
      height: 70px;
    }
    .hide-1200 {
      @media screen and (max-width: 1200px) {
        display: none;
      }
    }
    .hide-1000 {
      @media screen and (max-width: 1000px) {
        display: none;
      }
    }
    .hide-768 {
      @media screen and (max-width: 768px) {
        display: none;
      }
    }
    .show-1200 {
      @media screen and (min-width: 1200px) {
        display: none;
      }
    }
    .show-1000 {
      @media screen and (min-width: 1000px) {
        display: none;
      }
    }
  }
}
</style>
